<div id="share_modal" data-modal="true" class="hidden fixed w-screen h-screen z-40 inset-0" _="on closeShareModal add .hidden to me">
  <div class="fixed bg-black z-40 w-full h-full opacity-75" _="on click trigger closeShareModal"></div>
  <div class="z-50 fixed flex justify-center top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 min-w-96" style="max-height: 90%; max-width: 90%;">
    <div class="relative w-full max-w-xl bg-white border-2 border-blue-400 rounded-lg p-5 shadow-xl h-min">
      <div class="w-full flex flex-row p-4">
        <h2 class="mb-0 text-2xl text-center">{{_('hand_in_exercise')}}</h2>          
      </div>
      <div class="md:p-6 border-t-2 border-gray-200" id="hand_in">
        <input class="text-xl flex-1 px-4 py-2 text-gray-800 rounded-lg" type="hidden" for="program_name" id="program_name" value="{{initial_adventure.save_name}}"/>
        {% if username and current_user_is_in_class %}
          <div class="flex flex-col gap-x-4 w-full my-3">
            <div data-view="if-not-submitted">
              <div>{{_('this_turns_in_assignment')}}</div>
      
              <div class="flex my-8 bg-yellow-200 border-yellow-500 border rounded p-4">
                <div>
                  <span class="fa-regular fa-hand"></span>
                </div>
                <div class="flex-1 mx-4">
                  {{_('make_sure_you_are_done')}}
                </div>
              </div>
      
              <div class="flex gap-8 items-center mt-4">
                <button class="blue-btn-new" id="do_hand_in_button"> <span class="fa-regular fa-paper-plane mr-4"></span> {{_('hand_in')}}</button>
                <a href="#" _="on click trigger closeShareModal">{{_('ill_work_some_more')}}</a>
              </div>
            </div>      
            <div data-view="if-submitted">
              <div class="my-4">
                <p>{{_('submitted_header')}}</p>
              </div>       
            </div>
          </div>
        {% elif username %} {# logged in/in class #}
          <div>
            {{_('not_in_class_no_handin')}}
          </div>
        {% else %} {# logged in/in class #}
          <div class="mt-8">
            <p>{{_('not_logged_in_handin')}}</p>
            <p><a href="/login">{{_('login')}}</a></p>
          </div>        
        {% endif %}
        <div class="flex justify-end mt-4">
          <button class="blue-btn-new" _="on click trigger closeShareModal">{{_('close')}}</button>
        </div>
      </div>
    </div>
  </div>
</div>
